<template>
<div id="password">
  <p><input type="text" maxlength="11" placeholder="手机/邮箱/用户名"><span></span></p>
  <p><input type="password" placeholder="密码"><span></span></p>
  <button>登录</button>
</div>
</template>

<script>
export default {
  name: 'password'
}
</script>

<style scoped lang='scss'>
@import '../../static/hotcss/px2rem.scss';
#password {
  width: 100%;
  height: px2rem(492);
  font-size: px2rem(24);
  p{
    width: 100%;
    height: px2rem(96);
    margin-top: px2rem(40);
    font-size: px2rem(24);
    span{
      font-size: px2rem(24);
    }
  }
  p:nth-child(1){
     border: 1px solid #bbb;
     border-radius: px2rem(10);
     display: flex;
     align-items: center;
     position: relative;
     input{
       width: 100%;
       height:px2rem(92);
       border: 0;
       padding-left: px2rem(20);
       font-size: px2rem(24);
       border-radius: px2rem(20);
       &:focus{
         outline: none;
         border: 1px solid #2395ff;
       }
     }
     span{
       position: absolute;
       right: 0;
       margin-right:px2rem(20); 
       color: #bbb;
     }
  }
  p:nth-child(2){
     border: 1px solid #bbb;
     border-radius: px2rem(10);
     display: flex;
     align-items: center;
     input{
       width: 100%;
       height:px2rem(92);
       border: 0;
       padding-left: px2rem(20);
       font-size: px2rem(24);
       border-radius: px2rem(20);
       &:focus{
         outline: none;
         border: 1px solid #2395ff;
       }
     }
  }
  button{
    width: 100%;
    height: px2rem(84);
    border-radius: px2rem(20);
    background: #00d762;
    font-size: px2rem(32);
    color: #fff;
    margin-top: px2rem(40);
    border:none; 
  }
}
</style>